/* 基础数据 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input, Table,  Modal, Select } from 'antd'
import moment from 'moment';
/* 引用接口文档路径 */
import {
  baseDataSelect,deleteBaseData,dataTypeSelect,baseDatathree
} from 'actions/admin'
import '../../style/userControl.less'

import ModalAddBaseData from './addBaseDataModal.js';


const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//基础数据列表
      contentModal:false,//列表内容详情弹窗
      modalList:{
          code:"",
          description:"",
          id:"",
          isDefault:"",
          ischecked:false,
          parentId:"",
          sortNum:"",
          type:"",
          typeName:"",
          value:""
        },//列表内容详情
      addModalFlg:false,//新增基础数据弹窗
      addModalType:"",
      dataType:[],//数据类型
      threedateType:[],//三级数据类型
    }
    this.keyword={"type":"","description":""};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数
    this.titleType = '';//类型
  }
  componentDidMount() {
    this.selectList();
    this.dataTypeList();
  }
  

  selectFn(){//点击搜索按钮
    this.keyword = {
      "type":this.props.form.getFieldValue('type'),
      "description":this.props.form.getFieldValue('description'),
    };
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(baseDataSelect(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })        
    }))
  }
  
  dataTypeList(){
    this.props.dispatch(dataTypeSelect(
      {},
      (respose) => {
        console.log(typeof respose.respData.resultData[0].code)
        this.setState({
          dataType: respose.respData.resultData,
        })
    }))
  }
  twoTypeFn(type){
    var temp=Object.assign({},this.state.modalList);
    temp.type=type;
    this.setState({
      modalList:temp,
    })
    this.selectTypeFn(type);
  }
  selectTypeFn(type){
    this.props.dispatch(baseDatathree(
      {"type":type},
      (respose) => {
        this.setState({
          threedateType:respose.respData.resultData
        })
      }))
  }
  ischeckedFn(flag){
    var temp=Object.assign({},this.state.modalList);
    temp.ischecked=flag;
    this.setState({
      modalList:temp,
    })
  }
  addReport(type,data){//新增基础数据 type=1
    //编辑的情况 type=2 带数据去组件
    if(type==2){
      this.selectTypeFn(data.type);
      this.setState({
        addModalFlg: true,
        modalList:Object.assign({"ischecked":data.parentId==null?false:true},data),
        addModalType:type,
      })
    }
    else{
      var modalList={
        code:"",
        description:"",
        id:"",
        isDefault:"",
        ischecked:false,
        parentId:"",
        sortNum:"",
        type:"",
        typeName:"",
        value:""
      }
      this.setState({
        addModalFlg: true,
        modalList:modalList,
        addModalType:type,
      })
    }
    

  }

  addModalCancel(){//关闭新增基础数据弹窗
    this.setState({
      addModalFlg: false,
    })
  }

  deleteList(id){
    Modal.confirm({
      content:"确定要删除该条信息么？",
      onOk:()=>{
        this.props.dispatch(deleteBaseData(
          {"id":id},
          (respose) => {
            this.selectList();
        }))
      },
      onCancel:()=>{

      }
    })
  }



  columns() {//表格标题
    return [
      {
        title: '序号',
        key: 'key',
        dataIndex: 'key',
        width: '10%',
        render: (text, recordId, index) => <span>{index+1}</span>,
      },
      {
        title: '键',
        dataIndex: 'code',
        key: 'code',
        width: '10%',
      },
      {
        title: '值',
        dataIndex: 'value',
        key: 'value',
        width: '10%',
      },
      {
        title: '类型',
        dataIndex: 'typeName',
        key: 'typeName',
        width: '10%',
      },
      {
        title: '排序',
        dataIndex: 'sortNum',
        key: 'sortNum',
        width: '10%',
      },
      {
        title: '是否默认',
        dataIndex: 'isDefault',
        key: 'isDefault',
        width: '10%',
        render: (text, recordId, index) => <span>{text==1?'是':'否'}</span>,        
      },
      {
        title: '描述',
        dataIndex: 'description',
        key: 'description',
        width: '10%',
      },
      {
        title: '操作',
        // key: 'id',
        // fixed: 'right',
        width: '10%',
        render: (text, recordId, index) => 
        <div>
          <Button type="primary" size="small" onClick={this.addReport.bind(this,2,text)} style={{marginRight:"5px",marginBottom:"5px"}}>编辑</Button>          
          <Button type="primary" size="small" onClick={this.deleteList.bind(this,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>删除</Button>  
        </div>,
        
      },
    ]
  }
  


  render () {
    const {form } = this.props
    const { getFieldDecorator } = form    
    const respData = this.state.list.respData ? this.state.list.respData : [];//刷新页面调用接口数据赋值
    // const modalList = this.state.modalList.respData ? this.state.modalList.respData :[];
    const dateFormat = 'YYYY/MM/DD';
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <Form onSubmit={this.selectFn.bind(this)} layout="inline">
            <FormItem label="数据类型">
            {
              getFieldDecorator('type', {
              rules: [{
                  required: false,
                }],
              })(
                <Select placeholder="请选择数据类型"    style={{ width: 200 }} >
                  <Select.Option value={""} key={0}>全部</Select.Option>                  
                  {
                    this.state.dataType.map((item,i)=> {
                      return(
                        <Select.Option value={item.code} key={i}>{item.value}</Select.Option>
                      )
                    })
                  }
                </Select>
              )
            }
            </FormItem>
            <FormItem label="数据描述">
              {
                getFieldDecorator('description', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }  
            </FormItem>
            <Button type="primary" onClick={this.selectFn.bind(this)}>搜索</Button>
            <Button type="primary" onClick={this.addReport.bind(this,1,{})}>新增</Button>
          </Form>
        </div>
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="id" 
            columns={this.columns()}//表格标题列
            dataSource={respData.resultData}
            pagination={{ total: respData.count, current:this.currentNumber, onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}
          />
        </Spin>
        {/* 新增基础数据弹窗 */}
        <ModalAddBaseData
          type={this.state.addModalType}
          ModalFlg={this.state.addModalFlg} 
          ModalCancel={this.addModalCancel.bind(this)} 
          callback={this.selectList.bind(this)}
          selectTypeList={this.state.dataType}
          content={this.state.modalList}
          threedateType={this.state.threedateType}
          selectcallback={this.twoTypeFn.bind(this)}
          ischeckedFn={this.ischeckedFn.bind(this)}
        />
      </div>
    )
  }
}
